/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="resource-config__form">
        <sf-fieldlabel class="p-l0">
            <lang>{{ labelName }}</lang>
        </sf-fieldlabel>
        <div
            class="resource-config__container"
            :style="{ width: defaultWidth + 'px' }">
            <div class="resource-form__option-content">
                <slot name="cpu_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconCPU"></i>
                    <lang>CPU资源</lang>
                    <sf-numberfield
                        v-model="submitData.cpuNum"
                        :min-value="1"
                        :allow-decimals="allowDecimals"
                        :default-width="60" />
                    <lang>核</lang>
                </div>
                <div class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>
                            <lang>1核</lang>
                        </div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                        v-model="submitData.cpuNum"
                        class="option-slider__sxf-slider"
                        tooltip-class="sxf-slider__tooltip"
                        :min="1"
                        :max="resourceNums.cpu" />
                    <div class="option-slider__text">
                        <div>{{ _("{0}核", resourceNums.cpu) }}</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
            <div v-if="showGpu"
                 class="resource-form__option-content">
                <slot name="gpu_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconCPU"></i>
                    <lang>GPU资源</lang>
                    <sf-numberfield
                        v-model="submitData.gpuNum"
                        :min-value="0"
                        :allow-decimals="false"
                        :default-width="60"
                        @change="_changeGpuNum" />
                    <lang>个</lang>
                </div>
                <div class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>0个</div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                        v-model="submitData.gpuNum"
                        class="option-slider__sxf-slider"
                        tooltip-class="sxf-slider__tooltip"
                        :min="0"
                        :max="resourceNums.gpu" />
                    <div class="option-slider__text">
                        <div>{{ resourceNums.gpu }}个</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
            <div class="resource-form__option-content">
                <slot name="memorySize_content"></slot>
                <div class="option-content__option-input">
                    <i class="iconfont iconneicun"></i>
                    <lang>内存资源</lang>
                    <sf-numberfield
                        v-model="submitData.memorySize"
                        :min-value="1"
                        :allow-decimals="allowDecimals"
                        :default-width="60" />
                    <lang>GB</lang>
                </div>
                <div class="option-content__option-slider">
                    <div class="option-slider__text">
                        <div>1GB</div>
                        <div>(MIN)</div>
                    </div>
                    <el-slider
                        v-model="submitData.memorySize"
                        class="option-slider__sxf-slider"
                        tooltip-class="sxf-slider__tooltip"
                        :min="1"
                        :max="resourceNums.memory" />
                    <div class="option-slider__text">
                        <div>{{ resourceNums.memory }}GB</div>
                        <div>(MAX)</div>
                    </div>
                </div>
            </div>
            <slot></slot>
        </div>
    </sf-form>
</template>

<style lang="less">
.resource-config__form {
    display: flex;
    padding: 0;
    .sfv-fieldlabel {
        margin-top: 10px;
    }
}
.resource-config__container {
    margin-left: 4px;
    /* width: 336px; */
    .resource-form__option-content {
        border: 1px solid #dddddd;
        border-radius: 2px;
        padding: 10px 20px;
        margin-bottom: 10px;
        margin-top: 0;
        background: #fff;
        .option-content__option-input {
            line-height: 32px;
        }

        .option-content__option-slider {
            display: flex;
            margin-top: 10px;
        }
        .option-slider__sxf-slider {
            flex: 1;
            padding: 0 10px;
        }
        .option-slider__text {
            text-align: center;
            color: #adadad;
        }
        // 饿了么组件样式修改
        .el-slider__bar {
            background-color: #1db83f;
        }
        .el-slider__button {
            background-color: #1db83f;
            border-color: #78e28f;
        }
        .el-slider__button-wrapper {
            z-index: 50;
        }
    }
    .sxf-slider__tooltip {
        background-color: transparent !important;
        color: #1db83f !important;
        padding: 0 !important;
        .popper__arrow {
            display: none;
        }
    }
}
</style>

<script>


export default {
    props: {
        showGpu: {
            type: Boolean,
            default: true
        },
        labelName: {
            type: String,
            default: _('资源分配')
        },
        defaultWidth: {
            type: [String, Number],
            default: '336'
        },
        submitData: {
            type: Object,
            default: () => {
                return {
                    cpuNum: 1,
                    memorySize: 1,
                    gpuNum: 0
                };
            }
        },
        allowDecimals: {
            type: Boolean,
            default: false
        },
        resourceNums: {
            type: Object,
            default: () => {
                return {
                    cpu: 256,
                    memory: 256,
                    gpu: 256
                };
            }
        }
    },

    computed: {

    },

    // watch:{
    //     'submitData.gpuNum':{
    //         handler () {
    //             debugger;
    //             if (!this.submitData.gpuNum) {
    //                 this.submitData.gpuNum = 0;
    //             }
    //         }
    //     }
    // },

    methods: {
        isValid () {
            if (!this.$refs.form.isValid()) {
                this.$showErr(this.$refs.form.getInvalidMsgs());
                return false;
            }
            return true;
        },
        setJsonValue (data) {
            Object.assign(this.submitData, data);
        },
        _changeGpuNum () {
            if (!this.submitData.gpuNum) {
                this.$nextTick().then(()=>{
                    this.submitData.gpuNum = 0;
                });
            }
        },

        getJsonValue () {
            if (!this.submitData.gpuNum) {
                this.submitData.gpuNum = 0;
            }
            return this.submitData;
        }
    }
};
</script>
